.checkbox {
	$this: &;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-left: $checkbox-margin-x;
	margin-right: $checkbox-margin-x;

	&::before {
		content: "";
		position: absolute;
		top: -$checkbox-hover-padding;
		bottom: -$checkbox-hover-padding;
		left: -$checkbox-hover-padding;
		right: -$checkbox-hover-padding;
		z-index: 0;
		background-color: $color-hover;
		border-radius: 50%;
		transform: scale3d(0, 0, 1);
		transition: transform .15s ease-out;
	}

	&__input {
		position: absolute;
		display: block;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
		z-index: 1;
	}

	&__icon {
		color: $icon-color;

		&--checked {
			color: lighten($color-primary, 5%);
		}
	}

	&:not(&--disabled) {
		&:hover,
		&#{$this}--focus-visible {
			&::before {
				transform: scale3d(1, 1, 1);
			}
		}
	}

	&:hover:not(&--disabled),
	&--focus-visible:not(&--disabled) {
		&::before {
			transform: scale3d(1, 1, 1);
		}
	}

	&--disabled {
		opacity: $input-disabled-opacity;

		#{$this}__input {
			cursor: auto;
		}
	}
}
